@import "../../styles/App.scss";
.city_select {
}
.city_select_content {
  border-top: 1px solid #ccc;
  background-color: #fff;
  // 容器的高度 = 屏幕的高 -  头部 导航栏的高度
  height: calc(100vh - 45px);
  overflow: hidden;

  position: relative;
  // 主要城市
  .main_list {
    .group_title {
      height: 40 * $rate;
      display: flex;
      align-items: center;
      padding-left: 10 * $rate;
      background-color: aqua;
    }
    .group_content {
      .city_item {
        height: 40 * $rate;
        display: flex;
        align-items: center;
        padding-left: 10 * $rate;
        border-bottom: 1 * $rate dashed #ccc;
      }
    }
  }
  // 字母列表
  .letter_view {
    position: absolute;
    // vw 方案 width = 设计稿中元素的宽度 * 100vw / 设计稿的宽度
    //  10  * $rate2
    right: 10 * $rate2;
    top: 5 * $rate2;
    // 重视起来 calc  里面的代码
    // calc(100% - 5px);  希望 sass 不要对它做处理!!!
    // calc(100% - 5 * $rate2) 希望 sass 对它做处理
    // 后期去看看sass的语法文档
    // height: calc(100% - 5 * $rate2);

    // 使用原生css变量的能力来实现
    height: calc(50% - 5 * var(--rate));
    display: flex;
    flex-direction: column;
    .letter_item {
      flex: 1;
      span {
        width: 18 * $rate2;
        border-radius: 50%;
        height: 18 * $rate2;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 12 * $rate2;
      }
    }
    .active {
      span {
        background-color: aqua;
      }
    }
  }
}
